<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>新增还款计划</title>
    <link rel="stylesheet" href="css/amazeui.min.css" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" href="css/swiper-3.3.1.min.css" />
    <script src="assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="js/amazeui.min.js" type="text/javascript"></script>


    <style>
        body {
            max-width: 640px;
            margin: 0 auto;
            font-size: 10px;
            background: #F2F3F8;
        }

        * {
            box-sizing: border-box;
        }

        [class*=am-u-] {
            padding: 0;
        }

        .hjh1 {
            display: none;
        }

        #aaa {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9998;
        }

        #ddd {
            display: none;
            width: 260px;
            height: auto;
            background: #fff;
            position: fixed;
            top: 35%;
            left: 0;
            right: 0;
            margin: auto;
            border-radius: 15px;
            z-index: 9999;
        }

        .qx_btn,
        .bd_btn {
            display: inline-block;
            line-height: 30px;
            font-size: 16px;
            width: 80px;
            border: 1px solid #ddd;
            text-align: center;
            background: #0165C7;
            color: #fff;
        }
    </style>
</head>

<body>
    <!--头部-->
    <header class="am-u">
        <div class="am-u-sm-12 head_nav" style="margin:0;">
            <div class="am-u-sm-2 am-vertical-align" style="text-align: center;">
                <a href="yinhang.html">
                    <img src="img/return@2x.png" class="am-vertical-align-middle" alt="" />
                </a>
            </div>
            <div class="am-u-sm-8 head_text">
                新增还款计划
            </div>
            <div class="am-u-sm-2" style="color: #fff;font-size: 13px;text-align: center;">
                <span class='tj_btn' onclick='tx_clic()' style="color: #fff;">
                    提交
                </span>
            </div>
        </div>
    </header>
    <div style="clear: both;"></div>
    <div class="am-u">
        <div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
            <div class="am-u-sm-3">
                <span>开始日期</span>
            </div>
            <div class="am-u-sm-9" style="text-align: right;">
                <input id='date_start' type="date" style="text-align: right;" />
            </div>
        </div>
        <div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
            <div class="am-u-sm-3">
                <span>结束日期</span>
            </div>
            <div class="am-u-sm-9" style="text-align: right;">
                <input id='date_end' type="date" style="text-align: right;" />
            </div>
        </div>
        <div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
            <div class="am-u-sm-3">
                <span>还款类别</span>
            </div>
            <div class="am-u-sm-9" style="text-align: right;">
                <select id='pay_type'>

                </select>
            </div>
        </div>
        <div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
            <div class="am-u-sm-3">
                <span>还款总金额</span>
            </div>
            <div class="am-u-sm-9" style="text-align: right;">
                <input id='money' type="text" placeholder="请输入还款总金额" dir='rtl' />
            </div>
        </div>
        <div class="am-u-sm-12 fenlei" style="padding:0 20px 0 20px ;">
            <div class="am-u-sm-3">
                <span>还款笔数</span>
            </div>
            <div class="am-u-sm-9" style="text-align: right;">
                <span class="onclic" onclick="onclic(this)" style="font-size: 16px;">-</span>
                <input type="number" value="0" name="num" style="display: inline-block;width: 20%;text-align: center;font-size: 15px;" id="code_num1" autocomplete="new-password"
                />
                <span class="onclic" onclick="onclic(this)" style="font-size: 16px;">+</span>
            </div>
        </div>
        <div style="clear: both;"></div>
        <div style="padding: 15px;padding-bottom: 5px;margin-top: 2%;">
            <button class="am-btn" id='jh_btn' style="background: #0165C7;color: #fff;width: 100%;border-radius: 5px;">预览计划</button>
        </div>
        <div style="text-align: center;font-size: 13px;padding: 8px;">预览计划列表</div>
        <div style="clear: both;"></div>
        <div style="display:none;" id='project'>
            <div class="am-u-sm-12" style="padding: 0 15px 0 15px;">
                <div class="am-u-sm-8" style="font-size: 15px;">
                    还款总金额：¥
                    <span id="money2">10000</span>
                </div>
                <div class="am-u-sm-4" style="padding-top: 5px;text-align: right;font-size: 11px;">共
                    <span id='num'></span>笔</div>
            </div>
            <div class="am-u-sm-12" style="padding: 3px 15px 3px 15px;">
                <div class="am-u-sm-4" style="font-size: 13px;color: #8E8E8E;">
                    手续费：
                    <span id="fee">86.0</span>元
                </div>
                <div class="am-u-sm-8" style="text-align: right;font-size: 12px;color:#44A1FE;padding-top: 1px;">执行计划需要
                    <span id="need_money">919.0</span>元</div>
            </div>
            <div class="am-u-sm-12" style="padding: 0px 15px 3px 15px;border-bottom:2px solid #41A0F0;">
                <div class="am-u-sm-8" style="font-size: 13px;color: #8E8E8E;">
                    制定时间：
                    <span id="add_time">2018/01/03 15:39</span>
                </div>
                <div class="am-u-sm-4"></div>
            </div>
            <div class="am-u" id="yl_list">
                <!--					<div class="am-u-sm-12" style="line-height: 35px;font-size:14px;background:#fff;padding:0 15px;width:96%;margin:2%;">
						<div class="am-u-sm-12" style="border-bottom:1px solid #434343;">
							<div class="am-u-sm-6">还款（￥833）</div>
							<div class="am-u-sm-6" style="text-align: right;">还款（￥833）</div>
						</div>
						<div class="am-u-sm-12">
							<div class="am-u-sm-12" style="background:#F2F3F8;padding:0 15px;line-height:25px;font-size:12px;color:#808080;">
								<div class="am-u-sm-6">
									消费（￥257）
								</div>
								<div class="am-u-sm-6" style="text-align: right;">
									消费（￥257）
								</div>
							</div>
						</div>
					</div>-->
            </div>
            <div style='clear:both;'></div>
        </div>
    </div>
    <div id="aaa"></div>
    <div id="ddd" style="text-align:center;padding:10px 0 25px 0;">
        <div class="am-u-sm-12" style="padding:20px 0;font-size:16px;">
            <div class="am-u-sm-4" style="text-align:right;">支付密码:</div>
            <div class="am-u-sm-8">
                <input type="password" id="pay_pwd" style="font-size:16px;border-radius: 5px;width:90%;outline:none;" placeholder="请输入支付密码">
            </div>
        </div>
        <div style="margin-bottom:7px;">
            <span class="qx_btn" style="margin-right:15px;">取消</span>
            <span class="bd_btn">确定</span>
        </div>
    </div>
    <div class="phone_code">

    </div>

    <!--url跳转弹框-->
    <div id="url_aaa"></div>
    <div id="url_ddd" style="width: 90%;height: 140px;">
        <div class="pop_main">
            <div class="img_left">
                <img src="img/dialog_logo.png" alt="logo" width="70" height="70">
            </div>
            <div class="text_right" style="margin-left: 2rem;">
                <h4 style="margin:0;font-weight: 500;">提示</h4>
                <p style="font-size:12px;margin: 0;line-height: 24px;text-align: left;"></p>
            </div>
        </div>
    </div>
    <script src="js/loading.js"></script>
    <script src="js/base64.js"></script>
    <script type="text/javascript">
        $(function () {
            var i = parseInt($("#code_num1").val());
            if (!i) {
                i = 0;
                $("#code_num1").val("0");
            }
        })
        var hhhh = null;

        function onclic(obj) {
            var t = $(obj).html();
            var i = parseInt($("#code_num1").val());
            if (t === "-") {
                if (i > 0) {
                    i -= 1;
                } else {
                    i = 0;
                }
            }
            if (t === "+") {
                i += 1;
            }
            $("#code_num1").val(i);
        }
        var token1 = sessionStorage['token'];
        $.ajax({
            type: "post",
            url: "http://www.rice.com/app/api/h5_access",
            data: {
                token: token1,
                method: "Plan|get_plan_type"
            },
            dataType: "json",
            success: function (result) {
                if (result.status == "1") {
                    var data = result.data
                    var sttr = "";
                    for (var i in data) {
                        sttr += '<option value="' + data[i].type + '" class="chan">' + data[i].name +
                            '</option>';
                    }
                    $("#pay_type").append(sttr);
                } else if (result.status == "2") {
                    alert(result.message);
                    location.href = "login.html";
                }
            }
        })
        $("#jh_btn").on("click", function () {
            var money1 = $("#money").val();
            var code_num2 = $("#code_num1").val();
            var date_start1 = $("#date_start").val();
            console.log(date_start1);
            var date_start2 = Date.parse(new Date(date_start1)) / 1000;
            var date_end1 = $("#date_end").val();
            var date_end2 = Date.parse(new Date(date_end1)) / 1000;
            var pay_type1 = $("#pay_type").find("option:selected").val();
            if (date_start1 == "" || date_start1 == null) {
                alert("请选择开始时间");
                return false;
            }
            if (date_end1 == "" || date_end1 == null) {
                alert("请选择结束时间");
                return false;
            }
            if (code_num2 == "" || code_num2 == null) {
                alert("请输入金额");
                return false;
            }
            if (pay_type1 == "" || pay_type1 == null) {
                alert("请选择次数");
                return false;
            }
            $.ajax({
                type: 'POST',
                url: "http://www.rice.com/app/api/h5_access",
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                datatype: "JSON",
                data: {
                    method: "Plan|load_plan",
                    token: token1,
                    money: money1,
                    date_start: date_start2,
                    date_end: date_end2,
                    pay_type: pay_type1,
                    num: code_num2
                },
                success: function (data) {
                    var data1 = JSON.parse(data);
                    console.log(data1);
                    hhhh = data1.data;
                    console.log(hhhh);
                    if (data1.status === 1) {
                        $("#project").css("display", "block");
                        var hh1 = data1.data.add_time;
                        var date = new Date(hh1 * 1000);
                        var Y = date.getFullYear() + '-';
                        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() +
                            1) + '-';
                        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) +
                            ' ';
                        var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) +
                            ':';
                        var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
                        $("#money2").html(data1.data.money);
                        $("#fee").html(data1.data.fee);
                        $("#need_money").html(data1.data.need_money);
                        $("#add_time").html(Y + M + D + h + m);
                        $("#num").html(data1.data.num);
                        var b = new Base64();
                        var hh = data1.data.plan_list;
                        jj = JSON.parse(b.decode(hh));
                        var html = "";
                        for (var i in jj) {
                            var kl = jj[i].date;
                            var date = new Date(kl * 1000);
                            var Y = date.getFullYear() + '-';
                            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() +
                                1) + '-';
                            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) +
                                ' ';
                            var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) +
                                ':';
                            var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
                            html +=
                                '<div class="am-u-sm-12" style="line-height: 35px;font-size:14px;background:#fff;padding:0 15px;width:96%;margin:0 2%;"><div class="am-u-sm-12 hjh" style="border-bottom:1px solid #434343;">';
                            html += '<div class="am-u-sm-6">还款（￥' + jj[i].money +
                                '）</div><div class="am-u-sm-6" style="text-align: right;">' + Y + M +
                                D + h + m + '</div></div>';
                            html += '<div class="am-u-sm-12 hjh1">';
                            for (var j in jj[i].cost_plan) {
                                var kl1 = jj[i].cost_plan[j].date;
                                var date = new Date(kl1 * 1000);
                                var Y1 = date.getFullYear() + '-';
                                var M1 = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) :
                                    date.getMonth() + 1) + '-';
                                var D1 = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) +
                                    ' ';
                                var h1 = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) +
                                    ':';
                                var m1 = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date
                                    .getMinutes());
                                html +=
                                    '<div class="am-u-sm-12" style="background:#F2F3F8;padding:0 15px;line-height:25px;font-size:12px;color:#808080;">';
                                html += '<div class="am-u-sm-6">消费（￥' + jj[i].cost_plan[j].money +
                                    '）</div><div class="am-u-sm-6" style="text-align: right;">' +
                                    Y1 + M1 + D1 + h1 + m1 + '</div></div>'
                            }
                            html += '</div></div>';
                        }
                        $("#yl_list").html(html);
                        $(".text_right>p").html(hhhh.note);
                        $("#url_aaa").show();
                        $("#url_ddd").show();
                        $(".hjh").on("click", function () {
                            if ($(this).next().css("display") == "none") {
                                $(this).next().css("display", "block");
                            } else {
                                $(this).next().css("display", "none");
                            }
                        })
                    } else if (Number(data1.status) == 2) {
                        alert(data1.message);
                        window.location.href = "login.html";
                    } else {
                        alert(data1.message);
                    }
                }
            })
        })

        function tx_clic() {
            if ($("#project").css("display") == "block") {
                $("#aaa").css("display", "block");
                $("#ddd").css("display", "block");
            } else {
                alert("请填写正确的计划");
            }
        }
        $(".qx_btn").on("click", function () {
            $("#aaa").css("display", "none");
            $("#ddd").css("display", "none");
        })
        $("#aaa").on("click", function () {
            $("#aaa").css("display", "none");
            $("#ddd").css("display", "none");
        })

        $("#url_aaa").on("click", function () {
            $("#url_aaa").css("display", "none");
            $("#url_ddd").css("display", "none");
        })
        $(".bd_btn").on("click", function () {
            var pay_pwd1 = $("#pay_pwd").val();
            if (pay_pwd1 == "" || pay_pwd1 == null) {
                alert("请输入支付密码");
                return false;
            }
            var gg = {};
            // var bank_credit_id = sessionStorage.getItem("dadid");
            gg.plan_list = hhhh.plan_list;
            gg.bank_credit_id = sessionStorage['dadid'];
            gg.fee = hhhh.fee;
            gg.order_no = hhhh.order_no;
            gg.need_money = hhhh.need_money;
            gg.money = hhhh.money;
            gg.pay_pwd = pay_pwd1;
            gg.token = token1;
            gg.method = "Plan|plan_add";
            gg.pay_type = hhhh.pay_type;
            gg.date_start = hhhh.date_start;
            gg.date_end = hhhh.date_end;
            gg.post_type = 4;
            $.ajax({
                type: 'POST',
                url: "http://www.rice.com/app/api/h5_access",
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                datatype: "JSON",
                data: gg,
                success: function (data) {
                    var data1 = JSON.parse(data);
                    if (data1.status === 1) {
                        alert(data1.message);
                        window.location.href = "Repayment.html";
                    } else if (Number(data1.status) == 2) {
                        alert(data1.message);
                        window.location.href = "login.html";
                    } else {
                        alert(data1.message);
                    }
                    if (data1.status == 8764) {
                        window.location.href = data1.data.url;
                    } else if (data1.status == 8765) {
                        alert("需发送短信，对应功能暂不要开发");
                    }
                }
            });
        })
    </script>
</body>

</html>